<template>
  <h5>{{ msg }}</h5>
  <h5>{{ count }}</h5>
  <button @click="emitxxx">分发事件</button>
</template>
<script>
  import { defineComponent} from 'vue';
  export default defineComponent({
    name:'ChildStudy',
    props:['msg'],
    // setup细节问题
    beforeCreate(){  //数据初始化的生命周期回调
      console.log('生命周期');
    },
    // setup的参数
    setup(prop,context){
      // prop参数:是一个对象,里面是父级组件向子级传递的所有数据(子级组件中使用props接收到的所有数据)
      // context参数:对象  里面有attrs对象(当前组件标签上的所有属性的对象,是props中没有声明接收的)  emit方法(分发事件)  slots对象(插槽)
      function emitxxx(){
        context.emit('xxx','++')
      }
      return{

      }
    }

    // setup 的执行时机和返回值
    //setup在beforeCreate之前执行了而且只执行一次,
    // 所以setup执行时,当前组件还未创建出来,所以组件实例对象this不能用
    // setup(){  //this 是undefined 所以不能用this调用data/computed/methods中的相关内容
    //   console.log('setup');
    //   const showMsg1=()=>{console.log('showMsg1');}
    //   return{
    //     showMsg1
    //     // setup 一般都是返回一个对象,对象中的属性和方法可以直接再html模板中使用
    //   }
    // },
    // data(){   //setup中的对象的内部属性和data对象return对象的属性,都可以在HTML模板中使用
    //   return {
    //     count:10  //setup中的对象的内部属性和data对象return对象的属性,会合并为组件的属性
    //   }
    // },
    // methods:{  //setup中的对象的内部方法和data对象return对象的方法,会合并为组件的方法
    //   showMsg2(){console.log('showMsg2');}   //在vue3中不要混合使用data和setup 以及 methods和setup
    // }
  })
</script>
<style scoped>
</style>